<template>
  <!--企业名称变更-->
  <uni-popup ref="modifyCompanyInfoDialog">
    <uni-popup-dialog
        type="info"
        cancelText="取消"
        confirmText="确认"
        title="企业名称变更"
        @close="cancel"
        @confirm="submitForm"
        before-close>
      <template v-slot="content">
        <view class="tip">
          <i class="iconfont colorIcon" style="margin-right: 10rpx;font-size: 26rpx;">&#xe70f;</i> 请输入已通过工商局核准的企业名称
        </view>
        <uni-forms
            ref="form"
            :modelValue="form"
            :rules="rules"
            :label-width="105" type="line" label-align="right"
            class="paddingAll">
          <uni-forms-item label="企业最新名称" name="companyName" required>
            <uni-easyinput placeholder="请输入企业最新名称" type="text" maxlength="50" v-model="form.companyName"/>
          </uni-forms-item>
          <uni-forms-item label="社会信用代码" name="creditCode">
            <uni-easyinput v-model="companyInfo.creditCode" type="text" placeholder="请输入社会信用代码" disabled/>
          </uni-forms-item>
        </uni-forms>
        <div class="show-text">
          <i class="iconfont colorIcon">&#xe70f;</i>
          <span>提醒：点击“提交”按钮，系统将更新当前企业信息，请知晓以下信息：</span>
          <p style="margin-top: 10rpx;">1、原电子印章将全部停用，系统将为企业创建新的电子印章。</p>
          <p>2、签署合同时，企业数字证书信息将自动更新，不影响已签署的合同。</p>
        </div>
      </template>
    </uni-popup-dialog>
  </uni-popup>
</template>

<script>
import {editCompanyInfo} from "@/api/ec/console/index";

export default {
  props: {},
  data() {
    return {
      // 企业信息
      companyInfo: this.$store.getters.companyInfo,
      // 修改
      isEdit: false,
      // 表单参数
      form: {
        companyName: '',
      },
      // 表单校验
      rules: {
        companyName: {
          rules: [
            {required: true, errorMessage: '请输入企业最新名称！'},
            {
              validateFunction: ((rule, value, data, callback) => {
                if (value == null || value.trim().length == 0) {
                  callback('请输入企业名称');
                } else if (value == this.companyInfo.name) {
                  callback('请输入新的企业名称，请重新输入');
                }
                return true;
              })
            },
          ]
        },
      },
    };
  },
  methods: {
    /** 打开弹出框 */
    toOpenDialog() {
      this.form = {companyName: this.companyInfo.name};
      this.$refs.modifyCompanyInfoDialog.open('center')
    },
    /** 取消按钮 */
    cancel() {
      this.$refs.modifyCompanyInfoDialog.close()
    },
    /** 变更企业信息,确定按钮 */
    submitForm() {
      this.$refs.form.validate().then(valid => {
        if (valid) {
          uni.showLoading({title: '加载中...', mask: true});
          editCompanyInfo(this.form).then(response => {
            uni.hideLoading()
            this.companyInfo.name = this.form.companyName;
            this.$store.commit('SET_COMPANY_INFO', this.companyInfo);
            this.cancel();
            this.$emit("success", "");
            this.$modal.msgSuccess("企业信息修改成功！");
          }).catch(() => {
            uni.hideLoading()
          });
        }
      });
    },
  }
};
</script>
<style scoped lang="scss">

::v-deep .uni-popup-dialog {
  width: 90%;
}

::v-deep .uni-dialog-content {
  padding: 20rpx;
  display: block;
}

.tip {
  background: #E6F6EF;
  padding: 15rpx;
  font-size: 22rpx;
  font-weight: 400;
  color: #555b65;
  line-height: 35rpx;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  margin-bottom: 25rpx;
}

.show-text {
  color: #666;
  padding: 15rpx;
  background: #F7F6F6;

  i {
    font-size: 26rpx;
    margin-right: 10rpx;
  }

  span {
    font-size: 26rpx;
  }

  p {
    font-size: 26rpx;
    text-indent: 1rem;
  }
}

</style>
